<template>
  <a-modal
    width="400px"
    :centered="true"
    :open="props.open"
    :ok-text="props.okText"
    :cancel-text="props.cancelText"
    :title="props.title"
    destroy-on-close
    @ok="onOk"
    @cancel="onCancel"
  >
    <div class="operationBox">
      <div class="tips">
        <span class="icon"><i class="iconfont icon-error-warning-fill"></i></span>
        <span>{{ props.info }}</span>
      </div>
      <div class="inputText">{{ props.dateLabel }}</div>
      <a-date-picker
        v-model:value="dateTime"
        :style="{ with: '100%' }"
        class="picker"
        show-time
        :disabled-date="disabledDate"
        placeholder="日期和时间"
        value-format="YYYY-MM-DD HH:mm:ss"
      />
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
  import dayjs, { Dayjs } from 'dayjs'
  import { ref } from 'vue'

  export interface TimerModalProps {
    open?: boolean
    title?: string
    okText?: string
    info?: string
    dateLabel?: string
    cancelText?: string
  }
  const props = withDefaults(defineProps<TimerModalProps>(), {
    open: false,
    title: '温馨提示',
    okText: '确定',
    cancelText: '取消',
    info: '请谨慎操作',
    dateLabel: '请选择时间'
  })
  const emits = defineEmits(['ok', 'cancel', 'update:open'])
  const open = ref(false)
  const dateTime = ref(undefined)
  const disabledDate = (current: Dayjs) => {
    return dayjs(current).isBefore(dayjs(), 'day')
  }

  const onOk = () => {
    emits('update:open', false)
    emits('ok', dateTime.value)
    dateTime.value = undefined
  }

  const onCancel = () => {
    dateTime.value = undefined
    emits('update:open', false)
    emits('cancel')
  }

  const openModal = () => {
    open.value = true
  }

  const closeModal = () => {
    open.value = false
  }

  defineExpose({
    open: openModal,
    close: closeModal
  })
</script>
<style lang="less" scoped>
  .operationBox {
    .tips {
      display: flex;
      line-height: 24px;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.75);

      .icon {
        .iconfont {
          margin-right: 10px;
          font-size: 20px;
          color: #f59700;
        }
      }
    }

    .inputText {
      margin-top: 40px;
      margin-bottom: 4px;
      color: rgba(0, 0, 0, 0.45);
    }

    .picker {
      width: 100%;
    }
  }
</style>
